<template>
  <div v-bind="$attrs" ref="$chartDom" />
</template>

<script>
export default {
  name: "VolCurChart"
}
</script>

<script setup>
import {ref, watch, computed, defineProps, onBeforeUnmount} from 'vue'
import * as echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'
const resize = ref(false)


const erd = elementResizeDetectorMaker()
const props = defineProps({
  data: {
    type: Array
  }  // data[{time: Date.now(), vol: 0.00, cur: 0.00}]
})
const data = computed(() => props.data)
const $chartDom = ref(null)
let chart = null
let volData = []
let curData = []
const chartUpdate = () => {
  volData = []
  curData = []
  data.value.forEach((val) => {
    volData.push([val.time, val.vol])
    curData.push([val.time, val.cur])
  })
  chart.setOption({
    series: [
      { data: volData },
      { data: curData }
    ]
  })
}
const option = {
  // title: {
  //   text: 'xxxx供电状态',
  //   left: 'center',
  //   top: 10
  // },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: true
    }
  },
  // legend: {
  //   data: ['电压', '电流'],
  //   left: 30,
  //   top: 7
  // },
  // toolbox: {
  //   top: 10,
  //   right: 30,
  //   feature: {
  //     dataZoom: {
  //       yAxisIndex: 'none'
  //     },
  //     restore: {},
  //     saveAsImage: {}
  //   }
  // },
  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },
  dataZoom: [
    // {
    //   show: true,
    //   realtime: true,
    //   start: 0,
    //   end: 100,
    //   xAxisIndex: [0, 1]
    // },
    {
      type: 'inside',
      realtime: true,
      start: 0,
      end: 100,
      xAxisIndex: [0, 1]
    }
  ],
  grid: [{}, {}],
  // grid: [
  //   {
  //     left: 45,
  //     right: 30,
  //     height: '32%',
  //     top: 20
  //   },
  //   {
  //     left: 45,
  //     right: 30,
  //     bottom: 30,
  //     height: '32%'
  //   }
  // ],
  xAxis: [
    {
      type: 'time',
      splitNumber: 3,
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        showMaxLabel: false,
        hideOverlap: true,
        formatter: '{HH}:{mm}:{ss}', // 得到的 label 形如：'13:12:59.117'
      },
      splitLine: {
        show: false
      }
    },
    {
      gridIndex: 1,
      type: 'time',
      splitNumber: 3,
      axisLabel: {
        hideOverlap: true,
        showMaxLabel: false,
        formatter: '{HH}:{mm}:{ss}', // 得到的 label 形如：'13:12:59.117'
      },
      splitLine: {
        show: false
      }
    },
  ],
  yAxis: [
    {
      name: '电压(V)',
      axisLine: {
        show: true
      },
      nameLocation: 'middle',
      nameTextStyle: {
        padding: [0,0,13,0]
      },
      type: 'value',
      splitNumber: 3,
    },
    {
      gridIndex: 1,
      name: '电流(A)',
      axisLine: {
        show: true
      },
      nameLocation: 'middle',
      nameTextStyle: {
        padding: [0,0,13,0]
      },
      type: 'value',
      splitNumber: 3,
    }
  ],
  series: [
    {
      name: '电压',
      type: 'line',
      symbol: 'none',
      smooth: true,
      lineStyle: {
        color: '#1495eb'
      },
      areaStyle: {
        color: '#d0eafb'
      },
      emphasis: {
        areaStyle: {
          color: '#d0eafb'
        }
      }
    },
    {
      xAxisIndex: 1,
      yAxisIndex: 1,
      name: '电流',
      type: 'line',
      symbol: 'none',
      smooth: true,
      lineStyle: {
        color: '#00cc66'
      },
      areaStyle: {
        color: '#a6e4dd'
      },
      emphasis: {
        areaStyle: {
          color: '#a6e4dd'
        }
      }
    }
    // #1495eb
  ]
}
const chartResize = () => {
  const chartPosition = {
    top: 10,
    bottom: 20,
    left: 45,
    right: 5
  }
  const domHeight = $chartDom.value['offsetHeight']
  const restHeight = domHeight-chartPosition.top-chartPosition.bottom-15
  const height = restHeight/2
  chart.setOption({
    grid: [
      {
        left: chartPosition.left,
        right: chartPosition.right,
        top: chartPosition.top,
        height: height
      },
      {
        left: chartPosition.left,
        right: chartPosition.right,
        bottom: chartPosition.bottom,
        height: height
      }
    ]
  })
  resize.value = true
  chart.resize()
}
watch($chartDom, () => {
  chart = echarts.init($chartDom.value)
  option && chart.setOption(option)
  chartResize()
  chartUpdate()
  //监听图表大小变化
  // $chartDom.value.addEventListener('resize', chartResize)  // div绑定resize事件无效，采用第三方插件解决
  erd.listenTo($chartDom.value, chartResize)
  setTimeout(() => {  // 解决部分手机浏览器显示异常问题
    chartResize()
  }, 300)
})
onBeforeUnmount(() => {
  chart.dispose()
  erd.removeListener(chartResize)
})
watch(data, () => {
  chartUpdate()
})

</script>

<style scoped>

</style>
